<div class="row-fluid">
    <div class="span3 smallstat box mobileHalf box-order" onTablet="span6" onDesktop="span3">
        <i class="icon-money blue"></i>
        <span class="title"><?= CHtml::link('Sản phẩm',url('product/index'))?></span>
        <span class="value"><?php echo Product::model()->count() ?></span>
    </div>
    <div class="span3 smallstat box mobileHalf box-order" onTablet="span6" onDesktop="span3">
        <i class="icon-list-alt yellow"></i>
        <span class="title"><?= CHtml::link('Danh mục',url('category/index'))?></span>
        <span class="value"><?php echo Category::model()->count(); ?></span>
    </div>
    <div class="span3 smallstat box mobileHalf box-order" onTablet="span6" onDesktop="span3">
        <i class="icon-book green"></i>
        <span class="title"><?= CHtml::link('Bài viết',url('post/index'))?></span>
        <span class="value"><?php echo Post::model()->count() ?></span>
    </div>
    <div class="span3 smallstat box mobileHalf  box-order" onTablet="span6" onDesktop="span3">
        <i class="icon-bar-chart red"></i>
        <span class="title">Người truy cập</span>
        <span class="value"><?php echo StatCounter::total(StatCounter::TYPE_VISITORS) ?></span>
    </div>
</div>
<hr>
<div class="row-fluid">
    <div onTablet="span12" onDesktop="span12">
        <div class="span12 multi-stat-box box">
            <div class="header row-fluid">
                <div class="left">
                    <h2>Thống kê truy cập</h2>
                    <!--<a class="icon-chevron-down"></a>-->
                </div>
                <div class="right">
                    <h2><?php echo Utils::_getSevenDayAgo(FALSE, TRUE); ?> - <?php echo date('d/M', time()) ?></h2>
                </div>
            </div>
            <div class="content row-fluid">	
                <div class="left">
                    <ul>
                        <li>
                            <span class="date">Overall</span>
                            <span class="value"><?php echo StatCounter::total(StatCounter::TYPE_VISITORS); ?></span>
                        </li>
                        <li>
                            <span class="date">Month <?php echo date('m/y') ?></span>
                            <span class="value"><?php echo StatCounter::thisMonth(StatCounter::TYPE_VISITORS); ?></span>
                        </li>
                        <li>
                            <span class="date">Today <?php echo date('d/m') ?></span>
                            <span class="value"> <?php echo StatCounter::today(StatCounter::TYPE_VISITORS); ?></span>
                        </li>

                        <li>
                            <span class="date">Online</span>
                            <span class="value"> <?php echo StatOnline::countUserOnline() ?></span>
                        </li>
                    </ul>	
                </div>
                <div class="right">
                    <div class="multi-stat-box-chart" style="height:180px; width: 90%; padding: 10px"></div>
                </div>
            </div>	
        </div>
    </div>
</div>
<!--<iframe id="forecast_embed" type="text/html" frameborder="0" height="245" width="100%" src="http://forecast.io/embed/#lat=21.0289&lon=105.8547&name=Ha Noi&units=uk"> </iframe>-->
<script>
    /**
     * Pageviews
     */

    if ($(".multi-stat-box-chart").length) {
        $(".multi-stat-box-chart").each(function() {
            var O = [[1111, 5], [1112, 10], [1113, 15], [1114, 20], [1115, 25], [1116, 30], [1117, 25]];
            var L =<?php echo str_replace('"', '', Utils::getPageview()); ?>;
            var I = $(this).parent().parent().css("color");
            var i = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
            function K(Q, R, P) {
                return new Date(Q, R - 1, P).getTime()
            }
            var M = $.plot($(".multi-stat-box-chart"), [{data: L}], {series: {lines: {show: true, lineWidth: 3, fill: false}, points: {show: true, lineWidth: 3, fill: true, fillColor: "#fff"}, shadowSize: 0}, grid: {hoverable: true, clickable: true, tickColor: "#fff", borderColor: false}, colors: ["#c7cbd5"], xaxis: {mode: "time", tickFormatter: function(Q, P) {
                        return i[new Date(Q).getDay()]
                    }, color: "#c7cbd5", autoscaleMargin: 1e-18}, yaxis: {ticks: 4, tickDecimals: 0, color: "#fff"}});
            function N(P, R, Q) {
                $('<div id="tooltip">' + Q + "</div>").css({position: "absolute", display: "none", top: R + 5, left: P + 5, border: "1px solid #fdd", padding: "2px", "background-color": "#dfeffc", opacity: 0.8}).appendTo("body").fadeIn(200)
            }
            var J = null;
            $(".multi-stat-box-chart").bind("plothover", function(R, T, Q) {
                $("#x").text(T.x.toFixed(2));
                $("#y").text(T.y.toFixed(2));
                if (Q) {
                    if (J != Q.dataIndex) {
                        J = Q.dataIndex;
                        $("#tooltip").remove();
                        var P = Q.datapoint[0].toFixed(2), S = Q.datapoint[1].toFixed(2);
                        N(Q.pageX, Q.pageY, Math.round(S) + ' visitors')
                    }
                } else {
                    $("#tooltip").remove();
                    J = null
                }
            })
        })
    }
</script>